import React from "react";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import { connect } from "dva";
import { Input } from "antd";
import "./index.less";

const AppHeader = (props) => {
  const { dispatch, $app } = props;
  const { menuCollapsed } = $app;

  const toggleCollapsed = () => {
    dispatch({
      type: "$app/setCollapsed",
      payload: !menuCollapsed,
    });
  };
  return (
    <header className="header">
      <div className="expand-icon" onClick={toggleCollapsed}>
        {menuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </div>
      <div className="account">
        <Input placeholder="请输入要查找的问题" />
        <div className="name">Hi, 张三！</div>
      </div>
    </header>
  );
};

export default connect((m) => m)(AppHeader);
